<script setup  lang="ts">
import {ref, reactive, onMounted } from "vue"
import * as echarts from 'echarts';


const intentionUrl = 'https://agc-storage-drcn.platform.dbankcloud.cn/v0/default-bucket-rwdjv/YuaYangIntelligence%2F%E8%83%8C%E6%99%AF%E5%9B%BE2.png?token=6c061fe3-8056-4a7e-b0ed-0f24a7582eff'
const developUrl = 'https://agc-storage-drcn.platform.dbankcloud.cn/v0/default-bucket-rwdjv/YuaYangIntelligence%2F%E8%83%8C%E6%99%AF%E5%9B%BE3.png?token=087cae28-4b7e-40bc-ad68-74560d4f0111'
const planUrl1 = 'https://agc-storage-drcn.platform.dbankcloud.cn/v0/default-bucket-rwdjv/YuaYangIntelligence%2F%E8%83%8C%E6%99%AF%E5%9B%BE4.jpg?token=16d7bf0c-f0a5-45ee-8b0a-4624971bf94c'
const planUrl2 = 'https://agc-storage-drcn.platform.dbankcloud.cn/v0/default-bucket-rwdjv/YuaYangIntelligence%2F%E8%83%8C%E6%99%AF%E5%9B%BE5.jpg?token=31d5e73d-efc6-45c4-beeb-9e78a29fbcc0'

const companyIconList = [
  {
    icon: 'icon-aixin_shixin',
    title: '德'
  },
  {
    icon: 'icon-zhili',
    title: '智'
  },
  {
    icon: 'icon-tiyu-lanqiu',
    title: '体'
  },
  {
    icon: 'icon-meishu-F',
    title: '美'
  },
  {
    icon: 'icon-paishou',
    title: '劳'
  }
  ]

const cultureList = [
  {
    icon: '',
    title: '朴素生活',
    content: '践行简单质朴的生活方式，专注于创造真正的价值'
  },
   {
    icon: '',
    title: '激情工作',
    content: '以饱满的热情投入工作，追求卓越的教育产品'
  },
   {
    icon: '',
    title: '爱国利民',
    content: '心系祖国教育事业，为培养下一代贡献力量'
  }
]

// 薪资政策图表相关
const salaryChartRef = ref<HTMLElement | null>(null);

onMounted(() => {
  if (salaryChartRef.value) {
    const chart = echarts.init(salaryChartRef.value);
    const option = {
      title: {
        text: '企业盈利分配方案',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '盈利分配',
          type: 'pie',
          radius: ['50%', '70%'], // 空心圆环效果
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: true,
            formatter: '{b}: {d}%' // 显示百分比
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: true
          },
          data: [
            { value: 20, name: '企业运营', itemStyle: { color: '#4ade80' } },
            { value: 80, name: '员工分配', itemStyle: { color: '#60a5fa' } }
          ]
        }
      ]
    };
    chart.setOption(option);
    
    // 响应式调整
    window.addEventListener('resize', function() {
      chart.resize();
    });
  }
});

</script>

<template>
  <div class="company">
    <div class="introduce">
        <p>圆阳智能</p>
        <p>用科技创新助力教育发展，让每个孩子都能享受智慧学习的乐趣</p>
         <el-button type="primary">了解更多</el-button>
    </div>
    <div class="intention">
      <div>
         <el-image style="width: 440px; height: 300px;border-radius: 10px; " :src="intentionUrl" />
      </div>
    
     <div>
      <p>企业初衷</p>
      <span>我们致力于中小学生的教育游戏开发、富含中华文明内涵的动漫开发和极具个性化的智能私塾学堂开发，让学生真正通过鸿蒙设备这种现代化智能互动方式，得到应有的德、智、体、美、劳全方位的个性化深入发展。</span>
      <div>
        <div v-for="item in companyIconList" :key="item.title">
        <i class="iconfont" :class="item.icon"></i>
        <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
    </div>
    <div class="develop">
      <div>
         <el-image style="width: 440px; height: 300px;border-radius: 10px; " :src="developUrl" />
      </div>
    
     <div>
      <p>企业发展历程</p>
      <span>圆阳智能成立于2025年5月，创始人黄先生本科毕业于华中地区某985高校，现在西南地区某高中任教物理学科，国家二级心理咨询师。黄先生大学毕业工作一年后，花费重金积蓄，在武汉汇众游戏学院潜心学习游戏编程。后因不满当时游戏行业坑害学生身心健康的现状，毅然拒绝进入游戏行业，转而投入利国利民的教育事业。值此人工智能飞速发展阶段，创始人看到个性化沉浸式学习性的游戏开发难度和人才资源需求下降，通过自身与教育行业接触，也深刻意识到广大家庭的教育硬性需求与学生现代化教育需求的矛盾，毅然拿出自己积蓄创办企业，希望找到一群志同道合的朋友，一起奋力于现代化智能信息教育的伟大事业。</span>
     
    </div>
    </div>
    <div class="plan">
      <div><p>企业规划</p></div>
      <div>
        <div>
           <el-image style="width: 510px; height: 180px" :src="planUrl1" />
          <p>教育游戏开发</p>
          <span>将小学生学习的知识游戏化，通过华为智慧屏打造沉浸式学习体验，</span>
        </div>
         <div>
           <el-image style="width: 510px; height: 180px" :src="planUrl2" />
          <p>教育游戏开发</p>
          <span>将小学生学习的知识游戏化，通过华为智慧屏打造沉浸式学习体验，</span>
        </div>
      </div>
    </div>
    <div class="culture">
      <p>企业价值观</p>
        <div>
          <div v-for="item in cultureList" :key="item.title">
            <p>{{ item.title }}</p>
            <span>{{ item.content }}</span>
          </div>
        </div>
    </div>
     <div class="salary">
    <p>薪资政策</p>
    <div ref="salaryChartRef" class="salary-chart"></div>
    <div class="salary-text">
      <p>当企业产品未上架或上架无收益时，员工可向企业申请基本的每月生活交通补助，具体金额标准可入职时协商写入劳动合同。</p>
    <p>当企业开始盈利时，百分之八十的盈利按员工入职时间权重平均分配给每个员工，前期申请过补助的员工，核发工资超过补助标准的部分自行扣减，直至扣减总额超过补助总额，以后工资不再扣减。</p>
  
    </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>


.company{ 
   display: flex;
  flex-direction: column;
  gap: 100px;
  .culture,.salary,.plan,.develop,.intention,.introduce{
  padding: 50px;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    >p{
 font-size: 30px;
  font-weight: 800;
    }
  }
  .develop,.intention,.introduce{
    >div{
      flex: 1;
    }
  }
  span{
      color: #75787c;
    }
    .introduce{
      padding: 30px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: start;
        width: 100%;
        height: 100vh;
        background-image: url('https://agc-storage-drcn.platform.dbankcloud.cn/v0/default-bucket-rwdjv/YuaYangIntelligence%2F%E8%83%8C%E6%99%AF%E5%9B%BE.png?token=dc1a9d08-d59e-4521-bac0-a035aee94c43'); // 替换为你的图片路径
    background-size: cover;      // 背景图覆盖整个容器
    // background-position: center; // 背景图居中
    background-repeat: no-repeat; // 不重复
    >p{
      &:nth-child(1){
        font-size: 50px;
        font-weight: 800;
        color: #fff;
        text-align: center;
      }
      &:nth-child(2){
        font-size: 20px;
        color: #fff;
        text-align: center;
      }
    }
    >.el-button{
      margin-top: 30px;
    }
}
.intention{
  padding: 30px;
  width: 100%;
  background-color: #fff;
  >div{
     display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin-left: 30px;
    gap: 20px;
    >p{
      font-size: 30px;
      font-weight: 800;
      color: #000;
      text-align: center;
      margin-bottom: 10px;
    }
    >div{
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      text-align: center;
      gap: 20px;
      i{
        color: #2563eb;
        font-size: 20px;
      }
    }
  }

}
.develop{
  padding: 30px;
  width: 100%;
  background-color: #fff;
  >div{
     display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin-left: 30px;
    gap: 20px;
    &:nth-child(2){
      border-radius: 15px;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
      padding: 20px;
    }
    >p{
      font-size: 30px;
      font-weight: 800;
      color: #000;
      text-align: center;
      margin-bottom: 10px;
    }
    >span{
      color: #75787c;
    }
  }

}
.plan{
  width: 100%;
  flex-direction: column;
  align-items: center;
  >div{
    display: flex;
    >p{
      font-size: 30px;
      font-weight: 800;
    }
    >div{
      display: flex;
      flex-direction: column;
      padding: 20px;
      margin: 20px;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
      >p{
        font-size: 18px;
        font-weight: 700;
        margin: 10px 0;
      }
  
    }

  }
}
.culture{
  width: 100%;
  flex-direction: column;
  background-color: #ffffff;
  >div{
    display: flex;
    >div{
      display: flex;
      flex-direction: column;
      flex: 1;
    align-items: center;
    justify-content: center;
    margin: 20px;
    padding: 20px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
     >p{
      font-size: 18px;
      font-weight: 700;
      margin: 10px 0;
  }
  >span{
     word-break: break-word; // 强制换行
        white-space: normal;   // 允许换行
  }
    }
   
}
}
.salary {
  width: 100%;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  
  > p {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
  }
  
  .salary-chart {
    width: 100%;
    height: 400px;
    max-width: 600px;
  }
  .salary-text{
    width: 50%;
    p{
      padding: 10px;
    }
  }
}
}


</style>
